<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>《初见》</title>
    <meta name="keywords" content="个人博客，个人网站" />
    <meta name="description" content="《初见》响应式个人博客,主要展示个人博客、相册、视频、介绍等功能。" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/base.css" rel="stylesheet">
    <link href="css/m.css" rel="stylesheet">
    <link rel="stylesheet" href="./mui-player/dist/mui-player.min.css">
    <script src="js/videoData.js"></script>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/comm.js"></script>
    <script src="js/open.js"></script>
    <script src="./mui-player/dist/mui-player.min.js"></script>
    <script src="./mui-player-desktop-plugin/dist/mui-player-desktop-plugin.min.js"></script>
</head>



<body>
    <header>
        <div class="box">
            <div class="logo">
                <a href="JavaScript:void(0)"><img
                        src="https://youyouhongchen.obs.cn-east-3.myhuaweicloud.com/sweet-home/images/public/logo.png"
                        alt="logo"></a>
            </div>
            <!-- <div class="ad_top">
                <a href="JavaScript:void(0)" οnclick="return false"><img
                        src="https://youyouhongchen.obs.cn-east-3.myhuaweicloud.com/sweet-home/images/public/ad01.jpg"
                        alt="广告"></a>
            </div>
            <div class="contact_icon">
                <ul>
                    <li><a href="http://wpa.qq.com/msgrd?v=3&uin=153694734&site=qq&menu=yes"><i class="icon_qq"></i></a>
                    </li>
                    <li><a href="tel:18792800701"><i class="icon_tel"></i></a></li>
                    <li><a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=1510778717@qq.com"><i
                                class="icon_email"></i></a></li>
                    <li><i class="icon_weixin"><img
                                src="https://youyouhongchen.obs.cn-east-3.myhuaweicloud.com/sweet-home/images/public/wx.png"
                                alt="微信号：18792800701"></i></li>
                </ul>
            </div> -->
            <div class="clear"></div>
            <nav>
                <ul id="starlist">
                    <li><a href="index.html">网站首页</a></li>
                    <li><a href="blog.html">博文日记</a></li>
                    <li><a href="photos.html">我的相册<i></i></a></li>
                    <li><a href="videos.html">我的视频</a></li>
                </ul>
                <h2 id="mnavh"><span class="navicon"></span></h2>
                <div class="is-search"> <i></i> </div>
                <div class="search-page">
                    <div class="search_box">
                        <div class="go-left"></div>
                        <div class="search">
                            <form action="http://zhuanti.ip3q.com/e/search/index.php" method="post" name="searchform"
                                id="searchform">
                                <input name="keyboard" id="keyboard" class="input_text" value="请输入关键字词"
                                    style="color: rgb(153, 153, 153);"
                                    onfocus="if(value=='请输入关键字词'){this.style.color='#000';value=''}"
                                    onblur="if(value==''){this.style.color='#999';value='请输入关键字词'}" type="text">
                                <input name="show" value="title" type="hidden">
                                <input name="tempid" value="1" type="hidden">
                                <input name="tbname" value="news" type="hidden">
                                <input name="Submit" class="input_submit" value="搜索" type="submit">
                            </form>
                        </div>
                    </div>
                </div>
                <!--search end-->
            </nav>
        </div>
    </header>
    <div class="ph_margin"></div>
    <div class="play_box">
        <div class="box">
            <div class="play_content">
                <div class="play_video">
                    <!-- <video controls height="450" id="ecmsvideoid" width="100%" webkit-playsinline playsinline
                        x5-playsinline x-webkit-airplay="allow">
                        <source class="source_box" src="videos/v03.mp4" />
                    </video> -->
                    <div id="mui-player" style="max-width: 100%;"></div>
                </div>
                <div class="play_info">
                    <section>
                        <h1 class="name">张碧晨-光的方向 (《长歌行》电视剧片头主题曲)</h1>
                        <p class="play_click">热度：332万</p>
                        <p class="play_time">时间：2021年4月6日</p>
                        <p class="play_about" id="content">
                            简介：张碧晨-光的方向 (《长歌行》电视剧片头主题曲)</p>
                        <div class="play_tags"><a href="JavaScript:void(0)">普通话</a><a
                                href="JavaScript:void(0)">电视剧</a><a href="JavaScript:void(0)">片头曲</a><a
                                href="JavaScript:void(0)">《骊歌行》</a></div>
                        <div class="diggit"> <a href="JavaScript:void(0)"> 很赞哦！
                                (<b id="diggnum">40</b>)</a> </div>
                    </section>
                </div>
            </div>
        </div>
    </div>
    <div class="clear"></div>
    <div class="box">
        <h2 class="h_title">猜你喜欢</h2>
        <div class="all_videos">
            <ul>
                <li><a href="#" data-id="100001"><i><img
                                src="https://youyouhongchen.obs.cn-east-3.myhuaweicloud.com/sweet-home/images/videos/离歌行.jpeg"
                                alt=""></i>
                        <p>张碧晨-光的方向 (《长歌行》电视剧片头主题曲)</p>
                        <span>热度：332万</span>
                    </a></li>
                <li><a href="#" data-id="100002"><i><img
                                src="https://youyouhongchen.obs.cn-east-3.myhuaweicloud.com/sweet-home/images/videos/芒种.jpeg"
                                alt=""></i>
                        <p>音阙诗听-赵方婧-芒种</p>
                        <span>热度：1913万</span>
                    </a></li>
                <li><a href="#" data-id="100003"><i><img
                                src="https://youyouhongchen.obs.cn-east-3.myhuaweicloud.com/sweet-home/images/videos/红昭愿.jpeg"
                                alt=""></i>
                        <p>音阙诗听-红昭愿</p>
                        <span>热度：321万</span>
                    </a></li>
                <li><a href="#" data-id="100004"><i><img
                                src="https://youyouhongchen.obs.cn-east-3.myhuaweicloud.com/sweet-home/images/videos/蔡徐坤-迷.jpg"
                                alt=""></i>
                        <p>蔡徐坤-迷</p>
                        <span>热度：868万</span>
                    </a></li>
                <li><a href="#" data-id="100005"><i><img
                                src="https://youyouhongchen.obs.cn-east-3.myhuaweicloud.com/sweet-home/images/videos/姚慧-你的情歌.jpeg"
                                alt=""></i>
                        <p>姚慧-你的情歌</p>
                        <span>热度：502</span>
                    </a></li>
                <li><a href="#" data-id="100006"><i><img
                                src="https://youyouhongchen.obs.cn-east-3.myhuaweicloud.com/sweet-home/images/videos/梁静茹-再见，少年.jpeg"
                                alt=""></i>
                        <p>梁静茹-再见，少年</p>
                        <span>热度：6.84万</span>
                    </a></li>
                <li><a href="#" data-id="100007"><i><img
                                src="https://youyouhongchen.obs.cn-east-3.myhuaweicloud.com/sweet-home/images/videos/金贵晟-虹之间.jpeg"
                                alt=""></i>
                        <p>金贵晟-虹之间</p>
                        <span>热度：1106万</span>
                    </a></li>
                <li><a href="#" data-id="100008"><i><img
                                src="https://youyouhongchen.obs.cn-east-3.myhuaweicloud.com/sweet-home/images/videos/你一定要幸福.jpeg"
                                alt=""></i>
                        <p>《你一定要幸福》</p>
                        <span>热度：268万</span>
                    </a></li>
                <li><a href="#" data-id="100009"><i><img
                                src="https://youyouhongchen.obs.cn-east-3.myhuaweicloud.com/sweet-home/images/videos/骁.jpeg"
                                alt=""></i>
                        <p>《骁》</p>
                        <span>热度：53.4万</span>
                    </a></li>
                <li><a href="#" data-id="100010"><i><img
                                src="https://youyouhongchen.obs.cn-east-3.myhuaweicloud.com/sweet-home/images/videos/少女时代-Divine.jpeg"
                                alt=""></i>
                        <p>少女时代-Divine</p>
                        <span>热度：421万</span>
                    </a></li>
                <li><a href="#" data-id="100011"><i><img
                                src="https://youyouhongchen.obs.cn-east-3.myhuaweicloud.com/sweet-home/images/videos/林宥嘉-天将明.jpeg"
                                alt=""></i>
                        <p>林宥嘉-天将明 (《秦时明月》</p>
                        <span>热度：371万</span>
                    </a></li>
                <li><a href="#" data-id="100012"><i><img
                                src="https://youyouhongchen.obs.cn-east-3.myhuaweicloud.com/sweet-home/images/videos/林宥嘉-当归.jpeg"
                                alt=""></i>
                        <p>林宥嘉-当归 (《秦时明月》</p>
                        <span>热度：406万</span>
                    </a></li>
                <li><a href="#" data-id="100013"><i><img
                                src="https://youyouhongchen.obs.cn-east-3.myhuaweicloud.com/sweet-home/images/videos/你好李焕英.jpg"
                                alt=""></i>
                        <p>张小斐-萱草花 (《你好，李焕英》电影主题曲)</p>
                        <span>热度：179万</span>
                    </a></li>
                <li><a href="#" data-id="100014"><i><img
                                src="https://youyouhongchen.obs.cn-east-3.myhuaweicloud.com/sweet-home/images/videos/春三月.jpeg"
                                alt=""></i>
                        <p>司南 - 春三月</p>
                        <span>热度：55万</span>
                    </a></li>
            </ul>
        </div>
    </div>
    <footer>
        <div class="box">
            <ul class="footer_nav">
                <li><a href="all_list.html">所有文章</a></li>
                <li><a href="tags.html">标签合集</a></li>
            </ul>
            <!-- <div class="guanzhu_img"><i><img
                        src="https://youyouhongchen.obs.cn-east-3.myhuaweicloud.com/sweet-home/images/public/wx.png"
                        alt="微信:18792800701">微信号</i> <i><img
                        src="https://youyouhongchen.obs.cn-east-3.myhuaweicloud.com/sweet-home/images/public/beautifulPicture.png"
                        alt="我的相册">我的图集</i></div> -->
        </div>
    </footer>
    <a href="#" title="返回顶部" class="icon-top"></a>

</body>
<script>
    $(document).ready(function () {

        function initContent() {
            var len = 9; // 默认显示的字数
            var content = document.getElementById("content"); // content 获取内容 div 对象
            var text = content.innerHTML; // text 为内容
            var span = document.createElement("span"); // 创建一个 SPAN 标签
            var n = document.createElement("a"); // 创建一个 A 标签
            span.innerHTML = text.substring(0, len); // SPAN 标签的内容为 text 的前 len 个字符
            n.innerHTML = text.length > len ? "...展开" : ""; // 创建的 A 标签内容，如果内容字数大于 len，那么为“..展开”，否则为空
            n.href = "javascript:void(0)"; // 设置 A 标签的链接地址（随意）
            n.onclick = function () { // 点击 A 链接执行下面函数
                // 如果 A 标签的内容为“..展开”，那么 A 标签内容变成“收起”，SPAN 标签的内容为 DIV 全部内容，否则内容为前 len 个字符
                if (n.innerHTML == "...展开") {
                    n.innerHTML = "收起";
                    span.innerHTML = text;
                } else {
                    n.innerHTML = "...展开";
                    span.innerHTML = text.substring(0, len);
                }
            }
            content.innerHTML = ""; // 设置 DIV 内容为空
            content.appendChild(span); // 把 SPAN 元素加到 DIV 中
            content.appendChild(n); // 把 A 元素加到 DIV 中
        }

        var tagsClass = "color: #98989b; display: inline-block; background: #303137; padding: 5px 8px; margin-right: 8px; margin-bottom: 8px; border-radius: 3px"

        var title = $(".play_info .name"),
            hot = $(".play_info .play_click"),
            pkayTime = $(".play_info .play_time"),
            content = $(".play_info .play_about"),
            diggnum = $(".play_info #diggnum"),
            play_video = $(".play_video"),
            play_tags = $(".play_info .play_tags");

        let videoId = localStorage.getItem("videoId");

        videoData.forEach(element => {
            if (element.id == videoId) {
                title.text(element.name)
                hot.text(element.hot)
                pkayTime.text(element.pkayTime)
                content.text(element.content)
                let html = ""
                element.play_tags.forEach(tag => {
                    html += "<a" + ' ' + 'style= ' + tagsClass + 'href=JavaScript:void(0)' + "> " + tag + "</a>"
                });
                play_tags.html(html)
                diggnum.text(element.diggnum)
                diggnum.on('click', function (event) {
                    event.preventDefault();
                    element.diggnum++
                });
                // play_video.html("")
                // let video = "<video controls height='450' id='ecmsvideoid' width='100%' webkit-playsinline playsinline x5-playsinline x-webkit-airplay='allow'> <source class='source_box' src='" + element.src + "'/></video>"

                // play_video.append(video)
                console.log(element.src)
                var playerConfig = {
                    container: '#mui-player',
                    title: element.name,
                    src: element.src,
                    poster: element.href,
                    videoAttribute: [
                        { attrKey: 'webkit-playsinline', attrValue: '' },
                        { attrKey: 'playsinline', attrValue: '' },
                        { attrKey: 'x5-playsinline', attrValue: '' },
                        { attrKey: 't7-video-player-type', attrValue: 'inline' },
                        { attrKey: 'x5-video-player-type', attrValue: 'h5-page' },
                        { attrKey: 'x-webkit-airplay', attrValue: 'allow' },
                        { attrKey: 'controlslist', attrValue: 'nodownload' },
                    ],
                }
                // var config = window.playerConfig;
                playerConfig.plugins = [
                    typeof MuiPlayerDesktopPlugin == 'function' ? new MuiPlayerDesktopPlugin({
                        thumbnails: { // 缩略图配置
                            // preview:['https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/image/output_160x90_10x10_001.jpg'],
                            tile: [10, 10],
                            scale: [160, 90],
                        },
                    }) : {},
                ]
                var mp = new MuiPlayer(playerConfig);
                let width = $(window).width()
                if (width > 500) {
                    $('#mui-player').css({ height: '450px' })
                }

            }
        });

        initContent()

        $(".all_videos a").click(function (event) {
            event.stopPropagation();
            let id = $(this).attr("data-id")
            let url = $(this).attr("data-url")
            videoData.forEach(element => {
                if (element.id == id) {
                    title.text(element.name)
                    hot.text(element.hot)
                    pkayTime.text(element.pkayTime)
                    content.text(element.content)
                    let html = ""
                    element.play_tags.forEach(tag => {
                        html += "<a" + ' ' + 'style= ' + tagsClass + 'href=JavaScript:void(0)' + "> " + tag + "</a>"
                    });
                    play_tags.html(html)
                    diggnum.text(element.diggnum)
                    diggnum.on('click', function (event) {
                        event.preventDefault();
                        element.diggnum++
                    });
                    // play_video.html("")
                    // let video = "<video controls height='450' id='ecmsvideoid' width='100%' webkit-playsinline playsinline x5-playsinline x-webkit-airplay='allow'> <source class='source_box' src='" + element.src + "'/></video>"
                    // play_video.append(video)
                    console.log(element.src)
                    var playerConfig = {
                        container: '#mui-player',
                        title: element.name,
                        src: element.src,
                        poster: element.href,
                        videoAttribute: [
                            { attrKey: 'webkit-playsinline', attrValue: '' },
                            { attrKey: 'playsinline', attrValue: '' },
                            { attrKey: 'x5-playsinline', attrValue: '' },
                            { attrKey: 't7-video-player-type', attrValue: 'inline' },
                            { attrKey: 'x5-video-player-type', attrValue: 'h5-page' },
                            { attrKey: 'x-webkit-airplay', attrValue: 'allow' },
                            { attrKey: 'controlslist', attrValue: 'nodownload' },
                        ],
                    }
                    // var config = window.playerConfig;
                    playerConfig.plugins = [
                        typeof MuiPlayerDesktopPlugin == 'function' ? new MuiPlayerDesktopPlugin({
                            thumbnails: { // 缩略图配置
                                // preview:['https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/image/output_160x90_10x10_001.jpg'],
                                tile: [10, 10],
                                scale: [160, 90],
                            },
                        }) : {},
                    ]
                    var mp = new MuiPlayer(playerConfig);
                    let width = $(window).width()
                    if (width > 500) {
                        $('#mui-player').css({ height: '450px' })
                    }
                }
            });
            initContent()
        });
    })
</script>

</html>